<template>
  <view id="toolBarHead">
    <view style="width:20px;"></view>
    <view style="flex: 1">
      <view class="companyName" @click="showModal = true">
        {{userInfo.COMPANYNAME}} 
      </view>
    </view>
    <view class="th_item">
      <view  class="companyName headImage">
        <n-popselect v-model:value="isUpdatePWD" :options="options" trigger="click" >
          <icon icon="user" style="font-size:25px"></icon>
        </n-popselect>
      </view>
    </view>
    <view class="th_item" @click="showModalAbout = true">
      <view class="companyName">关于</view>
    </view>
    <view class="th_item"><view class="companyName" @click="showModalExit = true">退出</view></view>

    <n-modal v-model:show="showModalUser" 
    style="position: fixed; top:80px; right:150px; height:auto; width:500px;">
      <view style="width:200px;min-height:100px;height:auto;background: #fff;">
        <n-button>修改密码</n-button>
      </view>
    </n-modal>

    <n-modal
      v-model:show="showModalExit"
      :mask-closable="false"
      preset="dialog"
      title="退出系统"
      content="您确定要退出当前系统?"
      positive-text="确认"
      @positive-click="userInfo.STATUS = 0"
      negative-text="取消"
    />

    <n-modal v-model:show="showModal" 
    style="position: fixed; top:80px; left:15px; height:auto; width:500px;">
      <cpy-name></cpy-name>
    </n-modal>

    <n-modal v-model:show="showModalAbout" 
    style="position: fixed; top:80px; right:20px; height:auto; width:300px;">
      <v-box :title="'关于'">
        <VCenter style="background:#fff;">
          <template #head>
            <form-image :src="'images/image1111.png'" style="width: 100px; height: 30px;"></form-image>
          </template>
        </VCenter>
        <VCenter :row="true">
          <template #head>
            <v-box :title="'版本信息'" :titleStyle="{height:'20px',marginTop:'15px', fontSize:'15px'}" style="width:100%" :space="0">
              <VCenter :row="true">
                <template #center>
                  <view>{{version}}</view>
                </template>
              </VCenter>
            </v-box>
          </template>
        </VCenter>
        <VCenter :row="true">
          <template #head>
            <v-box :title="'公司名称'" :titleStyle="{height:'20px',marginTop:'15px', fontSize:'15px'}" style="width:100%" :space="0">
              <VCenter :row="true">
                <template #center>
                  <view style="font-size:14px; margin-top:10px;">南京十方网络科技有限公司防攻击网关</view>
                </template>
              </VCenter>
            </v-box>
          </template>
        </VCenter>
        <view style="height:15px"></view>
      </v-box>
    </n-modal>
  </view>
  <!-- modal -->
</template>

<script>
import VBox from "@/components/scraw/VBox.vue"
import VCenter from "@/components/scraw/VCenter.vue"
import FormImage from "@/components/form/FormImage.vue"
import { getCurrentInstance, ref } from 'vue'
export default {
  components:{
    VBox,
    VCenter,
    FormImage,
  },
  data() {
    return {
      showModalAbout: false,showModal:false,showModalExit:false,options: [
        {
          label: '修改密码',
          value: true
        }],
        isUpdatePWD:false
      }
  },
  watch:{
    "isUpdatePWD"() {
      //修改密码
      this.userInfo.STATUS = 2
    }
  },
  methods: {
    update() {

    }
  },
  setup() {
    const { proxy: cthis } = getCurrentInstance();
    return { version :cthis.$userInfo.SORFTVSERION, userInfo:ref(cthis.$userInfo)}
  }
};
</script>

<style>
#toolBarHead {
  background: #23262e;
  display: flex;
  flex-direction: row;
  color: #ffffff;
}
#toolBarHead > view {
  width: 90px;
  display: flex;
  align-items: center;
  font-size: 17px;
}

.headImage > image {
  width: 40.3px;
  height: 40.3px;
  border-radius: 50%;
  background: #ffffff;
}
.companyName{
  height:100%;
  font-size: 16px;
  padding:0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.companyName:hover {
  color:#2f9383; 
  border-bottom:3px solid #2f9383;
}
</style>